<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<th:block th:include="include :: header('菜单列表')" />
<style type="text/css">
	label.layui-form-label{width: 100px;}
	.badge-primary{background-color: #1ab394;color: #FFFFFF;}
	.treetable-thead{background-color: #f2f2f2;}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{padding:4px}
	.bootstrap-tree-table .treetable-tbody td{vertical-align:middle;}
	.layui-btn-container .layui-btn{margin-right: 10px;margin-bottom: 5px;margin-top: 5px;}
	.bootstrap-tree-table .treetable-bars .tool-left{margin-top:0px;margin-bottom:0px}
	.layui-col-sm4 {width: 23%;}
</style>
	
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="main-content">
		<form id="menu-form" class="layui-form dis-ctr" >
			<div class="layui-form layui-card-header layuiadmin-card-header-auto">
				<div class="layui-form-item">
					<div class="layui-inline layui-col-sm4">
						<label class="layui-form-label">菜单名称：</label>
						<div class="layui-input-block">
							<input id="menuCaption" type="text" name="menuCaption" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline layui-col-sm4">
						<label class="layui-form-label">菜单状态：</label>
						<div class="layui-input-block">
							<select name="menuState">
								<option value="">所有</option>
								<option value="1">显示</option>
								<option value="0">隐藏</option>
							</select>
						</div>
					</div>
					<div class="layui-inline layui-col-sm4">
						<a class="layui-btn layuiadmin-btn-order dhicon dh-search" id="btn-search"><span class="fa_span">查询</span></a>
						<button type="reset" class="layui-btn layui-btn-primary dhicon dh-refresh" ><span class="fa_span">重置</span></button>
					</div>
				</div>
			</div>
		</form>
		<div class="btn-group-sm layui-table-tool" id="toolbar" role="group">
			<a class="layui-btn layui-btn-normal layui-table-tools" onclick="$.operate.add(0)" shiro:hasPermission="system:menu:add">
					<i class="dhicon dh-plus"></i> 新增
				</a>
				<a class="btn btn-info" id="expandAllBtn">
					<i class="dhicon dh-exchange"></i> 展开/折叠
				</a>
		</div>
		<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-tree-table"></table>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<!-- bootstrap-treetable 表单树插件 -->
<script th:src="@{/js/bootstrap-treetable/bootstrap-treetable.js?v=2}"></script>
<script th:inline="javascript">
 	/*<![CDATA[*/
	var prefix = ctx + "system/menu";
	var editFlag = [[${@permission.hasPermi('system:menu:edit')}]];
	var addFlag = [[${@permission.hasPermi('system:menu:add')}]];
	var removeFlag = [[${@permission.hasPermi('system:menu:delete')}]];
 	/*]]>*/
</script>
<script type="text/javascript">
layui.use(['table','form','layer','jquery'], function () {
	var $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table;
	var options = {
		code: "guid",
		parentCode: "pguid",
		uniqueId: "guid",
		expandAll: false, //是否全部展开
		showColumns:false,// 是否显示隐藏某列下拉框
		expandFirst: false,//是否展开第一级
		showRefresh: false,//是否显示刷新按钮
		showSearch: false,//是否显示检索信息
		url: prefix + "/list",
		createUrl: prefix + "/add?guid={id}",
		updateUrl: prefix + "/edit?guid={id}",
		modalName: "菜单",
		columns: [
			{field: 'selectItem', radio: true},
			{title: '菜单名称',field: 'menuCaption',width: '20%',formatter: function(value, row, index) {
				if ($.common.isEmpty(row.menuICON)) {
					return row.menuCaption;
				} else {
					return '<i class="' + row.menuICON + '"></i> <span class="nav-label">' + row.menuCaption + '</span>';
				}
			}},
			{title: '类型',field: 'menuType',width: '10%',align: "left",formatter: function(value, item, index) {
				if (item.pguid == 0) {
					return '<span class="label label-success">目录</span>';
				}
				else if (item.pguid != 0) {
					return '<span class="label label-primary">菜单</span>';
				}
			}},
			{field: 'menuOrder',title: '排序',width: '10%',align: "left"},
			{field: 'menuState',title: '菜单状态',width: '10%',align: "left",formatter: function(value, row, index) {
				if (row.menuState == 1) {
					return '<span class="badge badge-primary">显示</span>';
				}
				return '-';
			}},
			{field: 'menuUrl',title: '菜单访问路径',width: '10%',align: "left"},
			{title: '操作',width: '20%',align: "left",formatter: function(value, row, index) {
				var actions = [];
				// if(row.pguid ==0){
					actions.push('<div class="layui-btn-container "><a class="layui-btn layui-btn-normal layui-btn-xs' + addFlag + '" href="javascript:void(0)" onclick="$.operate.add(\'' + row.guid + '\')"><i class="dhicon dh-plus"></i>&nbsp;新增子级</a> ');
				// }
				actions.push('<a class="layui-btn layui-btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.guid + '\')"><i class="dhicon dh-edit"></i>&nbsp;编辑</a> ');
				actions.push('<a class="layui-btn layui-btn-danger layui-btn-xs '+ removeFlag + '"  name="remove" href="javascript:void(0)" data-guid='+row.guid+' data-pguid='+row.pguid+' onclick="remove(\'' + row.guid + '\',\''+row.pguid+'\')"><i class="dhicon dh-remove"></i>&nbsp;删除</a></div>');
				return actions.join('');
			}}
			]
		};
	$.treeTable.init(options);
});
//删除
function remove(guid,pguid){
	if($("a[data-pguid="+guid+"]").length){
		$.modal.confirmCom('该菜单存在子菜单，是否全部删除？',function(){
			$.post(prefix + "/delete/",{'menuInfoItems':JSON.stringify([{'guid':guid}])})
			$.each($("a[data-pguid="+guid+"]"),function(v,k){
				$.post(prefix + "/delete/",{'menuInfoItems':JSON.stringify([{'guid':k.dataset.guid}])})
			});
			allReload({code:0});
		});
	}else{
	 	$.operate.remove("确定要删除么？",prefix + "/delete/",{'menuInfoItems':JSON.stringify([{'guid':guid}])},function(result){
	 		allReload(result);
	 	});
	}
}
//刷新
function allReload(result){
	if(result.code==0){
		setTimeout(function(){
			layer.closeAll();
			$.treeTable.search('');
		}, 1000);
	}
}
</script>
</body>
</html>